<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" class="user">
    <br> <br>
    <input type="password" class="pwd"> 
    <br><br>
    <button>登录</button>

    <script>

        // 想要实现登录 --- 依靠用户名和密码登录

        // 1 需要数据  
        //   aa:123   bb:222  cc:333  dd:666

        // 设置cookie
        //    是一个字符串
        //    名称=内容;路径=/;到期时间=?
        //    一条一条的存储

        const date = new Date() ;
        document.cookie = 'aa=123;path=/;expires=' + date ;
        document.cookie = 'bb=222;path=/;expires=' + date ;
        document.cookie = 'cc=333;path=/;expires=' + date ;


        // 2 得到数据 --- 获取cookie 
        // 获取到的是名称和内容 
        // 得到的是一个字符串
        const cookies = document.cookie ;
        console.log(cookies);   // aa=123; bb=222; cc=333

        // 3 处理数据 把字符串变成数组
        let arr = cookies.split('; ') ;
        console.log(arr);   //  ['aa=123', 'bb=222', 'cc=333']

        // map会返回一个新的数组
        arr = arr.map( v => {
            return {
                username : v.split('=')[0] ,
                userpwd : v.split('=')[1]
            }
        })

        console.log(arr);

        
        // 点击事件

        const oBtn = document.querySelector('button');
        const oUser = document.querySelector('.user');
        const oPwd = document.querySelector('.pwd');

        oBtn.onclick = function() {
            // 获取用户名和密码
            const uname = oUser.value ;
            const upwd = oPwd.value ;

            // 验证用户名密码

            // 非空验证
            if(uname && upwd) {

                // 判断用户名是否存在  --- 查询满足条件的数据  filter / some
                //  filter返回的是一个数组

                // const res = arr.filter( v => {
                //     return v.username === uname 
                // })
                // 简写
                const res = arr.filter( v => v.username === uname) ;
                console.log(res);

                const resObj = res[0] ;

                if(resObj) {
                    // 判断密码
                    if(resObj.userpwd === upwd) {
                        alert('登录成功') ;
                        // 需要把登录的信息存入cookie  ---- 账号有多个，需要知道当前是哪一个账号在登录
                        document.cookie =  `LOGIN_USER=${uname};path=/;expires=${date}` ;
                        location.href = './09_index.html' ;
                    } else {
                        alert('密码错误') ;
                    }
                }
                else {
                    alert('用户名不存在') ;
                }

            } 
        }

        



    
      

    </script>
    
</body>
</html>